Docked Composer

Docked Composer

Docked Composer is a persistent utility bar that allows a user to continually use the app to complete tasks or gather information while expanding/collapsing a composer window.

Base

Preview

No content has been added for this component.

No content has been added for this component.

<div class="slds-docked_container">
  <section class="slds-docked-composer slds-grid slds-grid_vertical slds-is-open" role="dialog" aria-labelledby="modal-heading-id-1" aria-describedby="modal-content-id-1">
    <header class="slds-docked-composer__header slds-grid slds-shrink-none" aria-live="assertive">
      <div class="slds-media slds-media_center slds-size_1-of-1 slds-no-space">
        <div class="slds-media__figure slds-m-right_x-small">
          <span class="slds-icon_container">
            <svg class="slds-icon slds-icon_small slds-icon-text-default" aria-hidden="true">
              <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#call"></use>
            </svg>
          </span>
        </div>
        <div class="slds-media__body">
          <h2 class="slds-truncate" id="modal-heading-id-1" title="Header">Header</h2>
        </div>
      </div>
      <div class="slds-col_bump-left slds-shrink-none">
        <button class="slds-button slds-button_icon slds-button_icon" title="Minimize window">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#minimize_window"></use>
          </svg>
          <span class="slds-assistive-text">Minimize Composer Panel</span>
        </button>
        <button class="slds-button slds-button_icon slds-button_icon" title="Expand Composer">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#expand_alt"></use>
          </svg>
          <span class="slds-assistive-text">Expand Composer Panel</span>
        </button>
        <button class="slds-button slds-button_icon slds-button_icon" title="Close">
          <svg class="slds-button__icon" aria-hidden="true">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use>
          </svg>
          <span class="slds-assistive-text">Close Composer Panel</span>
        </button>
      </div>
    </header>
    <div class="slds-docked-composer__body" id="modal-content-id-1">
      <div class="slds-align_absolute-center">Docked Composer Panel Body
        <br/> This area consumes the feature</div>
    </div>
    <footer class="slds-docked-composer__footer slds-shrink-none">
      <div class="slds-col_bump-left slds-text-align_right">
        <button class="slds-button slds-button_brand">Action</button>
      </div>
    </footer>
  </section>
</div>

About Docked Composer

The docked composer relies heavily on utility classes to piece together the layout so please pay close attention to the markup and classes.

The overflow menu for docked composer, .slds-docked-composer--overflow, displays when the number of docked composers exceeds the width of the viewport. The overflow pill displays with a number indicator for all hidden docked composers. A user can invoke a popover with all available docked composers and replace the furthest left docked composer with the one being selected.

When a user clicks on the "pop out" icon in the .slds-docked-composer__header, a modal displays and contains the task that was currently in the docked composer.


Overview of CSS Classes

Selector.slds-docked-composer
Summary
Supportdev-ready
Restrictsection, div
VariantTrue
Selector.slds-has-focus
Summary
Restrict.slds-docked-composer
ModifierTrue
Selector.slds-is-open
Summary
Restrict.slds-docked-composer
ModifierTrue
Selector.slds-is-closed
Summary
Restrict.slds-docked-composer
ModifierTrue
Selector.slds-docked-composer__header
Summary

Bar at the top of the composer that contains actionable items to invoke, such as minimizing, popping out the composer and removing the composer.

Restrict.slds-docked-composer header
Selector.slds-docked-composer__body
Summary

Primary area within docked composer that contains specific task

Restrict.slds-docked-composer div
Selector.slds-docked-composer__body_form
Summary
Restrict.slds-docked-composer__body
Selector.slds-email-composer
Summary

Initiazes email composer inside of a docked composer

Restrict.slds-docked-composer__body div
Selector.slds-email-composer__combobox
Summary

Modifier combobox when used inside of email composer

Restrict.slds-email-composer div
Selector.slds-email-composer__recipient
Summary

Provides styles for recipient labels inside of email composer

Restrict.slds-email-composer label
Selector.slds-docked-composer__lead
Summary

Within the docked composer body, the lead is the first region

Restrict.slds-docked-composer div
Selector.slds-docked-composer__toolbar
Summary
Restrict.slds-docked-composer div
Selector.slds-docked-composer__footer
Summary

Bar at the bottom of the composer that contains actionable items to invoke, such as saving, associating relationships and adding content.

Restrict.slds-docked-composer footer
Selector.slds-docked-composer_overflow
Summary

When the number of docked composer exceed the width of the viewport, this class modifies the docked composer styles

Restrict.slds-docked-composer